import React, { useState, useEffect } from 'react';
import {
  Card,
  Row,
  Col,
  Form,
  Input,
  InputNumber,
  Switch,
  Button,
  Space,
  Typography,
  Tabs,
  Table,
  Tag,
  Modal,
  message,
  Divider,
  Alert,
  Upload,
  Select,
  TimePicker,
  Tooltip,
  Progress,
  List,
  Popconfirm
} from 'antd';
import {
  SettingOutlined,
  DatabaseOutlined,
  SecurityScanOutlined,
  CloudUploadOutlined,
  MailOutlined,
  BellOutlined,
  SaveOutlined,
  ReloadOutlined,
  ExclamationCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  InfoCircleOutlined,
  UploadOutlined,
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  EyeOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { UploadProps } from 'antd';
import dayjs from 'dayjs';

const { Option } = Select;
const { TextArea } = Input;
const { Title, Text } = Typography;
// const { TabPane } = Tabs; // Deprecated, using items instead

interface SystemConfig {
  general: {
    systemName: string;
    systemLogo: string;
    timezone: string;
    language: string;
    currency: string;
    dateFormat: string;
    enableMaintenance: boolean;
    maintenanceMessage: string;
  };
  security: {
    passwordMinLength: number;
    passwordComplexity: boolean;
    sessionTimeout: number;
    maxLoginAttempts: number;
    enableTwoFactor: boolean;
    enableIPWhitelist: boolean;
    ipWhitelist: string[];
  };
  notification: {
    emailEnabled: boolean;
    smsEnabled: boolean;
    pushEnabled: boolean;
    emailServer: {
      host: string;
      port: number;
      username: string;
      password: string;
      encryption: string;
    };
    smsProvider: {
      provider: string;
      apiKey: string;
      apiSecret: string;
    };
  };
  backup: {
    autoBackup: boolean;
    backupFrequency: string;
    backupTime: string;
    retentionDays: number;
    backupLocation: string;
  };
}

interface BackupRecord {
  id: string;
  filename: string;
  size: number;
  createdAt: string;
  type: string;
  status: string;
  description: string;
}

interface SystemLog {
  id: string;
  level: string;
  message: string;
  module: string;
  userId?: string;
  userName?: string;
  ip: string;
  timestamp: string;
  details?: any;
}

const SystemManagement: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('general');
  const [form] = Form.useForm();
  const [systemConfig, setSystemConfig] = useState<SystemConfig | null>(null);
  const [backupRecords, setBackupRecords] = useState<BackupRecord[]>([]);
  const [systemLogs, setSystemLogs] = useState<SystemLog[]>([]);
  const [backupModalVisible, setBackupModalVisible] = useState(false);
  const [logModalVisible, setLogModalVisible] = useState(false);
  const [selectedLog, setSelectedLog] = useState<SystemLog | null>(null);

  useEffect(() => {
    loadSystemConfig();
    loadBackupRecords();
    loadSystemLogs();
  }, []);

  const loadSystemConfig = async () => {
    setLoading(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      const mockConfig: SystemConfig = {
        general: {
          systemName: '测试DEMO',
          systemLogo: '/logo.png',
          timezone: 'Asia/Shanghai',
          language: 'zh-CN',
          currency: 'CNY',
          dateFormat: 'YYYY-MM-DD',
          enableMaintenance: false,
          maintenanceMessage: '系统维护中，请稍后访问'
        },
        security: {
          passwordMinLength: 8,
          passwordComplexity: true,
          sessionTimeout: 30,
          maxLoginAttempts: 5,
          enableTwoFactor: true,
          enableIPWhitelist: false,
          ipWhitelist: ['192.168.1.0/24', '10.0.0.0/8']
        },
        notification: {
          emailEnabled: true,
          smsEnabled: true,
          pushEnabled: true,
          emailServer: {
            host: 'smtp.example.com',
            port: 587,
            username: 'system@example.com',
            password: '********',
            encryption: 'TLS'
          },
          smsProvider: {
            provider: 'aliyun',
            apiKey: '********',
            apiSecret: '********'
          }
        },
        backup: {
          autoBackup: true,
          backupFrequency: 'daily',
          backupTime: '02:00',
          retentionDays: 30,
          backupLocation: '/backup'
        }
      };
      
      setSystemConfig(mockConfig);
      form.setFieldsValue(mockConfig);
    } catch (error) {
      message.error('加载系统配置失败');
    } finally {
      setLoading(false);
    }
  };

  const loadBackupRecords = async () => {
    try {
      const mockBackups: BackupRecord[] = [
        {
          id: 'backup001',
          filename: 'system_backup_20240115_020000.sql',
          size: 256000000,
          createdAt: '2024-01-15 02:00:00',
          type: 'auto',
          status: 'completed',
          description: '自动备份'
        },
        {
          id: 'backup002',
          filename: 'system_backup_20240114_020000.sql',
          size: 248000000,
          createdAt: '2024-01-14 02:00:00',
          type: 'auto',
          status: 'completed',
          description: '自动备份'
        },
        {
          id: 'backup003',
          filename: 'manual_backup_20240113_150000.sql',
          size: 245000000,
          createdAt: '2024-01-13 15:00:00',
          type: 'manual',
          status: 'completed',
          description: '手动备份 - 系统升级前'
        }
      ];
      
      setBackupRecords(mockBackups);
    } catch (error) {
      message.error('加载备份记录失败');
    }
  };

  const loadSystemLogs = async () => {
    try {
      const mockLogs: SystemLog[] = [
        {
          id: 'log001',
          level: 'info',
          message: '用户登录成功',
          module: 'auth',
          userId: 'user001',
          userName: '张三',
          ip: '192.168.1.100',
          timestamp: '2024-01-15 14:30:25'
        },
        {
          id: 'log002',
          level: 'warning',
          message: '密码错误次数过多',
          module: 'auth',
          userId: 'user002',
          userName: '李四',
          ip: '192.168.1.101',
          timestamp: '2024-01-15 14:25:10'
        },
        {
          id: 'log003',
          level: 'error',
          message: '数据库连接失败',
          module: 'database',
          ip: '192.168.1.1',
          timestamp: '2024-01-15 14:20:05',
          details: {
            error: 'Connection timeout',
            database: 'wealth_management',
            duration: '30s'
          }
        }
      ];
      
      setSystemLogs(mockLogs);
    } catch (error) {
      message.error('加载系统日志失败');
    }
  };

  const handleSaveConfig = async (values: any) => {
    setLoading(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('系统配置保存成功');
      setSystemConfig({ ...systemConfig, ...values });
    } catch (error) {
      message.error('保存配置失败');
    } finally {
      setLoading(false);
    }
  };

  const handleCreateBackup = async () => {
    setLoading(true);
    try {
      await new Promise(resolve => setTimeout(resolve, 2000));
      message.success('备份创建成功');
      loadBackupRecords();
      setBackupModalVisible(false);
    } catch (error) {
      message.error('创建备份失败');
    } finally {
      setLoading(false);
    }
  };

  const handleDeleteBackup = async (id: string) => {
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('备份删除成功');
      setBackupRecords(backupRecords.filter(record => record.id !== id));
    } catch (error) {
      message.error('删除备份失败');
    }
  };

  const handleRestoreBackup = async (id: string) => {
    Modal.confirm({
      title: '确认恢复备份',
      content: '恢复备份将覆盖当前数据，此操作不可逆，是否继续？',
      okText: '确认恢复',
      cancelText: '取消',
      okType: 'danger',
      onOk: async () => {
        try {
          await new Promise(resolve => setTimeout(resolve, 3000));
          message.success('备份恢复成功');
        } catch (error) {
          message.error('恢复备份失败');
        }
      }
    });
  };

  // 备份记录表格列
  const backupColumns: ColumnsType<BackupRecord> = [
    {
      title: '文件名',
      dataIndex: 'filename',
      ellipsis: true
    },
    {
      title: '大小',
      dataIndex: 'size',
      render: (size: number) => `${(size / 1024 / 1024).toFixed(1)} MB`
    },
    {
      title: '类型',
      dataIndex: 'type',
      render: (type: string) => (
        <Tag color={type === 'auto' ? 'blue' : 'green'}>
          {type === 'auto' ? '自动' : '手动'}
        </Tag>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status: string) => (
        <Tag color={status === 'completed' ? 'green' : status === 'failed' ? 'red' : 'orange'}>
          {status === 'completed' ? '完成' : status === 'failed' ? '失败' : '进行中'}
        </Tag>
      )
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt'
    },
    {
      title: '操作',
      key: 'actions',
      render: (_, record) => (
        <Space>
          <Button type="link" size="small" onClick={() => handleRestoreBackup(record.id)}>
            恢复
          </Button>
          <Popconfirm
            title="确定删除此备份？"
            onConfirm={() => handleDeleteBackup(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" size="small" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ];

  // 系统日志表格列
  const logColumns: ColumnsType<SystemLog> = [
    {
      title: '级别',
      dataIndex: 'level',
      width: 80,
      render: (level: string) => {
        const colors = {
          info: 'blue',
          warning: 'orange',
          error: 'red',
          debug: 'gray'
        };
        return <Tag color={colors[level as keyof typeof colors]}>{level.toUpperCase()}</Tag>;
      }
    },
    {
      title: '模块',
      dataIndex: 'module',
      width: 100
    },
    {
      title: '消息',
      dataIndex: 'message',
      ellipsis: true
    },
    {
      title: '用户',
      dataIndex: 'userName',
      width: 100,
      render: (name: string) => name || '-'
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      width: 120
    },
    {
      title: '时间',
      dataIndex: 'timestamp',
      width: 150
    },
    {
      title: '操作',
      key: 'actions',
      width: 80,
      render: (_, record) => (
        <Button 
          type="link" 
          size="small" 
          icon={<EyeOutlined />}
          onClick={() => {
            setSelectedLog(record);
            setLogModalVisible(true);
          }}
        >
          详情
        </Button>
      )
    }
  ];

  const uploadProps: UploadProps = {
    name: 'file',
    action: '/api/system/upload-logo',
    headers: {
      authorization: 'Bearer ' + localStorage.getItem('token'),
    },
    onChange(info) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  return (
    <div>
      {/* 页面标题 */}
      <div style={{ marginBottom: 24 }}>
        <Row justify="space-between" align="middle">
          <Col>
            <Title level={3} style={{ margin: 0 }}>系统管理</Title>
          </Col>
          <Col>
            <Space>
              <Button icon={<ReloadOutlined />} onClick={loadSystemConfig}>
                刷新配置
              </Button>
              <Button 
                type="primary" 
                icon={<SaveOutlined />} 
                onClick={() => form.submit()}
                loading={loading}
              >
                保存配置
              </Button>
            </Space>
          </Col>
        </Row>
      </div>

      {/* 配置标签页 */}
      <Tabs 
        activeKey={activeTab} 
        onChange={setActiveTab}
        items={[
          {
            key: 'general',
            label: <span><SettingOutlined />基础配置</span>,
            children: (
          <Card>
            <Form
              form={form}
              layout="vertical"
              onFinish={handleSaveConfig}
              initialValues={systemConfig?.general}
            >
              <Row gutter={[16, 16]}>
                <Col span={12}>
                  <Form.Item
                    label="系统名称"
                    name={['general', 'systemName']}
                    rules={[{ required: true, message: '请输入系统名称' }]}
                  >
                    <Input placeholder="请输入系统名称" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="系统Logo" name={['general', 'systemLogo']}>
                    <Upload {...uploadProps}>
                      <Button icon={<UploadOutlined />}>上传Logo</Button>
                    </Upload>
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="时区" name={['general', 'timezone']}>
                    <Select>
                      <Option value="Asia/Shanghai">Asia/Shanghai</Option>
                      <Option value="UTC">UTC</Option>
                      <Option value="America/New_York">America/New_York</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="语言" name={['general', 'language']}>
                    <Select>
                      <Option value="zh-CN">简体中文</Option>
                      <Option value="en-US">English</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="货币" name={['general', 'currency']}>
                    <Select>
                      <Option value="CNY">人民币 (CNY)</Option>
                      <Option value="USD">美元 (USD)</Option>
                      <Option value="EUR">欧元 (EUR)</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="日期格式" name={['general', 'dateFormat']}>
                    <Select>
                      <Option value="YYYY-MM-DD">YYYY-MM-DD</Option>
                      <Option value="MM/DD/YYYY">MM/DD/YYYY</Option>
                      <Option value="DD/MM/YYYY">DD/MM/YYYY</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="维护模式" name={['general', 'enableMaintenance']} valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="维护提示信息" name={['general', 'maintenanceMessage']}>
                    <TextArea rows={3} placeholder="请输入维护提示信息" />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
            )
          },
          {
            key: 'security',
            label: <span><SecurityScanOutlined />安全配置</span>,
            children: (
          <Card>
            <Form
              form={form}
              layout="vertical"
              onFinish={handleSaveConfig}
              initialValues={systemConfig?.security}
            >
              <Row gutter={[16, 16]}>
                <Col span={8}>
                  <Form.Item
                    label="密码最小长度"
                    name={['security', 'passwordMinLength']}
                    rules={[{ required: true, message: '请输入密码最小长度' }]}
                  >
                    <InputNumber min={6} max={20} style={{ width: '100%' }} />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="密码复杂度要求" name={['security', 'passwordComplexity']} valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item
                    label="会话超时时间(分钟)"
                    name={['security', 'sessionTimeout']}
                    rules={[{ required: true, message: '请输入会话超时时间' }]}
                  >
                    <InputNumber min={5} max={480} style={{ width: '100%' }} />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item
                    label="最大登录尝试次数"
                    name={['security', 'maxLoginAttempts']}
                    rules={[{ required: true, message: '请输入最大登录尝试次数' }]}
                  >
                    <InputNumber min={3} max={10} style={{ width: '100%' }} />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="双因素认证" name={['security', 'enableTwoFactor']} valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="IP白名单" name={['security', 'enableIPWhitelist']} valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="IP白名单地址" name={['security', 'ipWhitelist']}>
                    <Select mode="tags" placeholder="请输入IP地址或网段">
                      <Option value="192.168.1.0/24">192.168.1.0/24</Option>
                      <Option value="10.0.0.0/8">10.0.0.0/8</Option>
                    </Select>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
            )
          },
          {
            key: 'notification',
            label: <span><BellOutlined />通知配置</span>,
            children: (
          <Card>
            <Form
              form={form}
              layout="vertical"
              onFinish={handleSaveConfig}
              initialValues={systemConfig?.notification}
            >
              <Row gutter={[16, 16]}>
                <Col span={8}>
                  <Form.Item label="邮件通知" name={['notification', 'emailEnabled']} valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="短信通知" name={['notification', 'smsEnabled']} valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="推送通知" name={['notification', 'pushEnabled']} valuePropName="checked">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                  </Form.Item>
                </Col>
              </Row>
              
              <Divider orientation="left">邮件服务器配置</Divider>
              <Row gutter={[16, 16]}>
                <Col span={12}>
                  <Form.Item label="SMTP服务器" name={['notification', 'emailServer', 'host']}>
                    <Input placeholder="smtp.example.com" />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item label="端口" name={['notification', 'emailServer', 'port']}>
                    <InputNumber min={1} max={65535} style={{ width: '100%' }} />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item label="加密方式" name={['notification', 'emailServer', 'encryption']}>
                    <Select>
                      <Option value="TLS">TLS</Option>
                      <Option value="SSL">SSL</Option>
                      <Option value="NONE">无</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="用户名" name={['notification', 'emailServer', 'username']}>
                    <Input placeholder="system@example.com" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="密码" name={['notification', 'emailServer', 'password']}>
                    <Input.Password placeholder="请输入邮箱密码" />
                  </Form.Item>
                </Col>
              </Row>
              
              <Divider orientation="left">短信服务配置</Divider>
              <Row gutter={[16, 16]}>
                <Col span={8}>
                  <Form.Item label="服务商" name={['notification', 'smsProvider', 'provider']}>
                    <Select>
                      <Option value="aliyun">阿里云</Option>
                      <Option value="tencent">腾讯云</Option>
                      <Option value="huawei">华为云</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="API Key" name={['notification', 'smsProvider', 'apiKey']}>
                    <Input.Password placeholder="请输入API Key" />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="API Secret" name={['notification', 'smsProvider', 'apiSecret']}>
                    <Input.Password placeholder="请输入API Secret" />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
            )
          },
          {
            key: 'backup',
            label: <span><DatabaseOutlined />备份管理</span>,
            children: (
          <Row gutter={[16, 16]}>
            <Col span={24}>
              <Card title="备份配置" size="small">
                <Form
                  form={form}
                  layout="vertical"
                  onFinish={handleSaveConfig}
                  initialValues={systemConfig?.backup}
                >
                  <Row gutter={[16, 16]}>
                    <Col span={6}>
                      <Form.Item label="自动备份" name={['backup', 'autoBackup']} valuePropName="checked">
                        <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item label="备份频率" name={['backup', 'backupFrequency']}>
                        <Select>
                          <Option value="daily">每日</Option>
                          <Option value="weekly">每周</Option>
                          <Option value="monthly">每月</Option>
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item label="备份时间" name={['backup', 'backupTime']}>
                        <TimePicker format="HH:mm" style={{ width: '100%' }} />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item label="保留天数" name={['backup', 'retentionDays']}>
                        <InputNumber min={1} max={365} style={{ width: '100%' }} />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item label="备份位置" name={['backup', 'backupLocation']}>
                        <Input placeholder="/backup" />
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>
              </Card>
            </Col>
            <Col span={24}>
              <Card 
                title="备份记录" 
                size="small"
                extra={
                  <Button 
                    type="primary" 
                    icon={<PlusOutlined />}
                    onClick={() => setBackupModalVisible(true)}
                  >
                    创建备份
                  </Button>
                }
              >
                <Table
                  columns={backupColumns}
                  dataSource={backupRecords}
                  rowKey="id"
                  size="small"
                  pagination={{ pageSize: 10 }}
                />
              </Card>
            </Col>
          </Row>
            )
          },
          {
            key: 'logs',
            label: <span><InfoCircleOutlined />系统日志</span>,
            children: (
          <Card>
            <Table
              columns={logColumns}
              dataSource={systemLogs}
              rowKey="id"
              size="small"
              pagination={{ pageSize: 20 }}
              scroll={{ x: 1000 }}
            />
          </Card>
            )
          }
        ]}
      />

      {/* 创建备份模态框 */}
      <Modal
        title="创建备份"
        open={backupModalVisible}
        onOk={handleCreateBackup}
        onCancel={() => setBackupModalVisible(false)}
        confirmLoading={loading}
      >
        <Form layout="vertical">
          <Form.Item label="备份描述">
            <TextArea rows={3} placeholder="请输入备份描述" />
          </Form.Item>
          <Alert
            message="备份提示"
            description="创建备份可能需要几分钟时间，请耐心等待。备份过程中请勿关闭页面。"
            type="info"
            showIcon
          />
        </Form>
      </Modal>

      {/* 日志详情模态框 */}
      <Modal
        title="日志详情"
        open={logModalVisible}
        onCancel={() => setLogModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setLogModalVisible(false)}>
            关闭
          </Button>
        ]}
        width={600}
      >
        {selectedLog && (
          <div>
            <Row gutter={[16, 8]}>
              <Col span={6}><strong>级别:</strong></Col>
              <Col span={18}>
                <Tag color={selectedLog.level === 'error' ? 'red' : selectedLog.level === 'warning' ? 'orange' : 'blue'}>
                  {selectedLog.level.toUpperCase()}
                </Tag>
              </Col>
              <Col span={6}><strong>模块:</strong></Col>
              <Col span={18}>{selectedLog.module}</Col>
              <Col span={6}><strong>消息:</strong></Col>
              <Col span={18}>{selectedLog.message}</Col>
              <Col span={6}><strong>用户:</strong></Col>
              <Col span={18}>{selectedLog.userName || '-'}</Col>
              <Col span={6}><strong>IP地址:</strong></Col>
              <Col span={18}>{selectedLog.ip}</Col>
              <Col span={6}><strong>时间:</strong></Col>
              <Col span={18}>{selectedLog.timestamp}</Col>
              {selectedLog.details && (
                <>
                  <Col span={6}><strong>详细信息:</strong></Col>
                  <Col span={18}>
                    <pre style={{ background: '#f5f5f5', padding: 8, borderRadius: 4, fontSize: 12 }}>
                      {JSON.stringify(selectedLog.details, null, 2)}
                    </pre>
                  </Col>
                </>
              )}
            </Row>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default SystemManagement;